<template>
  <div class="lc-chart-text">
    <div class="lc-chart-title" ref="catalogueItemTitle">{{ title }}</div>
    <img src="../../../assets/imgs/left/chartTitle.png" ref="catalogueItemBg" />
    <div ref="catalogueItemValue" class="text">
      <span ref="blockItemItemNum"
        >{{ num
        }}<em v-if="data.unit" class="em-unit">{{ data.unit }}</em></span
      >
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['data'],
  data() {
    return {
      num: 0,
      title: '',
      unit: ''
    }
  },
  created() {
    // this.num = this.data.num
    // this.title = this.data.title
  },
  mounted() {},
  computed: {},
  watch: {},
  methods: {
    init() {
      let _this = this
      let num = this.data.num
      let tl = new TimelineMax({})
      let catalogueItemBg = TweenMax.to(this.$refs.catalogueItemBg, 0.7, {
        opacity: 1,
        scale: 1
      })
      let catalogueItemTitle = () => {
        TweenMax.to(this.$refs.catalogueItemTitle, 0.7, {
          scrambleText: {
            text: this.data.title,
            chars: '_ ',
            speed: 0.3
          }
        })
      }
      let catalogueItemValue = TweenMax.to(this.$refs.catalogueItemValue, 0.8, {
        opacity: 1,
        scale: 1
      })
      let value = TweenMax.to(this, 1, {
        num: () => this.data.num,
        roundProps: ['num']
      })
      tl.addLabel('start')
        .add(catalogueItemBg, 'start+=0')
        .add(catalogueItemTitle, 'start+=0')
        .add(catalogueItemValue, 'start+=0.3')
        .add(value, 'start+=0.2')
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
.lc-chart-text {
  img {
    opacity: 1;
    transform: scale(0);
  }
  .lc-chart-title {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'HYQiHeiY2-35J';
    position: absolute;
    left: 15px;
    top: 2px;
  }
  .text {
    // margin-top: -5px;
    font-size: 24px;
    font-family: 'Acens';
    text-align: center;
    color: #c9ddff;
    text-shadow: 5px 0 8px rgba(0, 247, 250, 0.2),
      -5px 0 8px rgba(0, 247, 250, 0.2), 0 5px 8px rgba(0, 247, 250, 0.2),
      0 -5px 8px rgba(0, 247, 250, 0.2);
    opacity: 1;
    transform: scale(0);
  }
}
.em-unit {
  font-size: 18px;
  padding-left: 3px;
  vertical-align: middle;
}
</style>
